<template>
    <div class="search-recommend">
        <!-- 热门推荐 标题栏 -->
        <van-cell title="热门推荐" class="recommend-title" :border="false">
        </van-cell>

        <!-- 搜索历史 内容栏 -->
        <van-tabs
            type="card"
            class="recommend-tabs"
            v-model="currentCate"
            color="#ff9800"
            title-inactive-color="#000"
            :animated="true"
            swipeable
        >
            <van-tab v-for="item in categories" :key="item" :title="item">
                <!-- 列表组件 -->
                <van-list>
                    <van-cell
                        v-for="(item,index) in recommendList"
                        :key="item.id"
                        :border="false"
                        :to="{name:'episode',params:{videoId:item.videoId}}"
                    >
                        <span :class="{ highlight: index < 3 }">
                            {{item.title}}
                        </span>
                        <van-icon name="arrow" />
                    </van-cell>
                </van-list>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
export default {
    props: {
        recommendList: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            categories: ['综合', '今日', '电影', '电视剧', '综艺'],
            currentCate: 0
        };
    }
};
</script>

<style lang="scss" scoped>
.search-recommend {
    text-align: left;
    background-color: #fff;
    padding: 0 40px;
    /deep/ .van-cell {
        padding: 0;
        color: #000;
        font-size: 28px;
        line-height: 80px;
    }
    /deep/ .van-tabs__wrap {
        box-sizing: border-box;
        border-bottom: 1px solid #bbb;
        height: 80px;
        .van-tabs__nav {
            margin: 0;
            padding: 0;
            border: 0;
            height: 80px;
            .van-tab {
                margin-top: 12px;
                width: 120px;
                height: 56px;
                font-size: 28px;
                border: 0;
                border-radius: 28px;
                span {
                    display: inline-block;
                    height: 56px;
                    line-height: 56px;
                }

            }
            .van-tab--active {
                    span {
                        font-weight: bold;
                    }
                }
        }
    }
    /deep/ .van-tabs__content {
        .van-list {
            .van-cell__value {
                position: relative;
                font-size: 34px;
                height: 90px;
                line-height: 90px;
                .van-icon-arrow {
                    position: absolute;
                    right: 0;
                    top: 30px;
                    font-size: 30px;
                    color: #bbb;
                }
            }
        }
    }
}
.highlight {
    color: #ff9800;
}
</style>
